<template>
    <div class="pbpage shop">
        <My-head :back="false" title="商城"></My-head>

        <div class="shop-box">
            <!-- 左侧边栏 -->
            <div class="nav">
                <van-sidebar v-model="activeKey">
                    <van-sidebar-item title="全部" />
                    <van-sidebar-item v-for="(l, i) in typeList" :key="i" :title="l.text" />
                </van-sidebar>
            </div>
            <!-- 右侧 -->
            <div class="rbox">
                <sList :list="goodList" v-if="activeKey == 0"></sList>
                <sList :list="goodList.filter(item => item.type.value == typeList[activeKey-1].value)" v-else></sList>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeKey: 0
        }
    },
    watch: {
        activeKey(v) {
            console.log(v)
        }
    },
    mounted() {
        if(!this.goodList.length > 0) {
            this.getGoodListAction()
        }
    }
}
</script>

<style lang="scss">

.shop {
    width:100%;
    height:100%;
    .shop-box {
        display: flex;
        height:100%;
        .nav {
            height:100%;
            overflow: hidden;
            background: #fff;
        }
        .rbox {
            flex:1;
            overflow: auto;
            background: #f4f4f4;
            flex-shrink: 0;
        }
    }
}

</style>